<template>
  <div>
    <a-select
      :allowClear="allowClear"
      :mode="multi==true?'multiple':'default'"
      style="width: 100%"
      :placeholder="placeholder"
      @deselect="deselect"
      v-model="ids"
      :open="open"
      :disabled="disabled"
      @change="selectChange"
      @dropdownVisibleChange="selectIds">
      <a-select-option   v-for="item in selectedObj" :key="item.id">{{showName!=null?item.htmc:item.finalNo}}</a-select-option>
<!--      <a-select-option v-else v-for="item in selectedObj" :key="item.id">{{item.htmc}}({{item.htbh}})</a-select-option>-->
    </a-select>
    <select-contract-manager-input-modal ref="inputModal" :penetrate="penetrate" :isCategoryType="isCategoryType" :htlx="htlx" :urlList="this.url.urlList" :multi="multi" :signUnit="signUnit" :jytd="jytd" :changeStatus="changeStatus" :allList="allList" :projectId="projectId" @choseObj="choseObj"></select-contract-manager-input-modal>
  </div>
</template>

<script>
  import SelectContractManagerInputModal from './modules/SelectContractManagerInputModal'
  import {getAction} from '@/api/manage'

  export default {
    name: "SelectPostInput",
    components: {SelectContractManagerInputModal},
    props: {
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      penetrate: {
        type: String,
        default: 'billNo',
      },
      open: {
        type: Boolean,
        required: false,
        default: false
      },
      value: {
        type: String,
        required: false
      },
      multi: {
        type: Boolean,
        default: false,
        required: false
      },
      props:{
        type: Object,
        default:null,
      },
      //标识动态返回展示数据
      flag: {
        type: Boolean,
        default: true,
        required: false
      },
      //多选标识
      muitFlag: {
        type: Boolean,
        default: false,
        required: false
      },
      htlx: {
        type: [String, Number],
        default: null,
        required: false
      },
      status: {
        type: String,
        required: false
      },
      projectId: {
        type: String
      },
      isCategoryType: {
        type: String
      },
      changeStatus: {
        type: String,
        default: ''
      },
      signUnit: {
        type: String,
        default: ''
      },
      //是否查询所有
      allList: {
        type: Boolean,
        default: false,
        required: false
      },
      showName: {
        type: String,
        default: null
      },
      jytd: {
        type: String,
        default: null
      },
      allowClear: {
        type: Boolean,
        default: false,
        required: false
      },
      placeholder: {
        type: String,
        default: '请选择合同'
      }
    },
    data() {
      return {
        val: '',
        ids: [],
        selectedObj: [],
        deleteIds: [],
        list: [],
        objs:"",
        url: {
          queryById: "/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryById",
          queryByIds: "/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryByIds",
          urlList:"/api/erp/omc/contractmanager/erpOmcContractManagerFinal/list2?status="
        }
      }
    },
    created() {
      this.url.urlList += this.status ? this.status : '2,3,7'
      if (!!this.htlx) {
        this.url.urlList += `&htlx=${this.htlx}`
      }
    },
    mounted() {
      // console.log(`selected ${this.ids}`);
      // console.log('this.value', this.val)
      this.initObj(this.value);
      //debugger;
    },
    watch: {
      value(val) {
        this.initObj(val);
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
      initObj(ids) {
        console.log("allList:",this.allList);
        console.log('this.val',this.val)
        console.log('this.muitFlag',!this.muitFlag)
        if (this.val && !this.muitFlag) {
          return
        }
        this.val = ids;
        // console.log(ids);
        this.deleteIds = [];
        this.selectedObj = [];
        if(ids&&ids.length>0) {
          this.ids = ids.split(",");
          let url='';
          let param={};
          if(this.ids.length==1){
            url=this.url.queryById;
            param={id:ids};
          }else{
            url=this.url.queryByIds;
            param={ids:ids};
          }
          getAction(url,param).then((res)=>{
            if(res.success){
              if(!Array.isArray(res.result)){
                this.selectedObj.push(res.result);
              }else{
                for(let i=0;i<res.result.length;i++){
                  this.selectedObj.push(res.result[i]);
                }
              }
              this.$refs.inputModal.edit(res.result,this.ids);
            }
          });
        } else{
          this.ids = [];
          this.$refs.inputModal.edit(null,null);
        }

      },
      resetObj() {
        this.userType = false;
        this.ids = [];
        this.selectedObj = [];
        this.deleteIds = [];
        this.open = false;
        this.$refs.inputModal.edit(null, null);
      },
      selectChange() {
        if(!this.ids || this.ids.length == 0) {
          this.selectedObj = []
          this.choseObj(this.selectedObj)
        }
      },
      selectIds() {
        if(!this.disabled){
          this.deleteId();
          console.log("allList:",this.allList);
          // if(!this.allList && !this.projectId){
          //   this.$message.warning('请先选择项目')
          //   return
          // } else {
            this.$refs.inputModal.add(this.selectedObj, this.ids);
        //  }
        }
      },
      deselect(value, option) {
        console.log('----------------------------------')
        this.deleteIds.push(value);
        this.deleteId();
        this.choseObj(this.selectedObj);
      },
      deleteId() {
        console.log('----------------------------------', this.deleteIds)
        let that = this;
        this.selectedObj = this.selectedObj.filter(function (e) {
          return that.deleteIds.indexOf(e.id) == -1;
        })
        this.deleteIds = [];
      },
      // 子modal回调
      choseObj: function (list) {
        this.selectedObj = list;
        this.ids = [];
        for (var i = 0; i < list.length; i++) {
          this.ids.push(list[i].id);
        }
        this.objs=this.ids.join(",");
        console.log('list', list)
        console.log('this.objs', this.objs)
        this.$emit("change", this.objs);
        this.$emit("back", this.selectedObj);
      },
    }
  }
</script>

<style scoped lang="less">
.p-select{
  ::v-deep {
  .ant-select-selection__rendered {
      width: 90% !important;
      display: inline !important;
    }
  }
}
</style>